<template>
  <view class="form-item">
    <view class="form-item-label">{{ modelData.caption }}：</view>
    <IbizMobInput
      class="form-item-editor"
      v-if="modelData.editor && modelData.editor.editorType === 'MOBTEXT'"
      :value="controller.value"
      :data="controller.data"
      :controller="controller.editor"
      :disabled="controller.state.disabled"
      :readonly="controller.model.editor?.readOnly"
      @change="onValueChange"
    ></IbizMobInput>
    <IbizMobSpan
      class="form-item-editor"
      v-else-if="modelData.editor && modelData.editor.editorType === 'SPAN'"
      :value="controller.value"
      :data="controller.data"
      :controller="controller.editor"
      :disabled="controller.state.disabled"
      :readonly="controller.model.editor?.readOnly"
      @onChange="onValueChange"
    ></IbizMobSpan>
    <text v-else class="form-item-editor">
      {{ modelData.editor && modelData.editor.editorType }}暂未支持
    </text>
  </view>
</template>
<script lang="ts" setup>
import { FormItemController } from '@ibiz-template/runtime'
import { IDEFormItem } from '@ibiz/model-core'

const props = defineProps({
  modelData: {
    type: Object as PropType<IDEFormItem>,
    required: true,
  },
  controller: {
    type: Object as PropType<FormItemController>,
    required: true,
  },
})

const onValueChange = (val: unknown, name?: string) => {
  console.log('执行了', val, name)

  props.controller.setDataValue(val, name)
}
</script>
<style>
.form-item {
  display: flex;
  height: 32px;
  padding: 8px;
  line-height: 32px;
}
.form-item-label {
  width: 100px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-item-editor {
  flex: 1;
  margin-left: 8px;
}
</style>
